﻿@page
@model FytSoa.Web.Pages.FytAdmin.Sys.MenuModifyModel
@{
    ViewData["Title"] = "菜单修改";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .organize-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0,0,0,.18);
        opacity: 0;
        height: 0;
        display: none;
    }

        .organize-tree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 330px;
            overflow: auto;
            transition: all .5s;
        }

        .organize-tree .ztree li a {
            height: 22px !important;
        }
    .layui-iconpicker {
        max-width: 100%;
    }

</style>
<form class="layui-form form-cus" action="" id="app">
    <div class="layui-form-item">
        <label class="layui-form-label">所属父级</label>
        <div class="layui-input-block">
            <input type="text" name="ParentName" id="ParentName" value="@Model.MenuModel.ParentName" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请选择所属父级" class="layui-input">
            <div class="organize-tree">
                <div id="tree" class="layui-tree-cus"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择图标</label>
        <div class="layui-input-block">
            <input type="text" id="iconPicker" lay-filter="iconPicker" value="@Model.MenuModel.Icon" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="Name" value="@Model.MenuModel.Name" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单别名</label>
        <div class="layui-input-block">
            <input type="text" name="NameCode" value="@Model.MenuModel.NameCode" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="用于权限控制操作" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">Url地址</label>
        <div class="layui-input-block">
            <input type="text" name="Urls" value="@Model.MenuModel.Urls" autocomplete="off" placeholder="请输入Url地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="Sort" value="@Model.MenuModel.Sort" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请输入排序" class="layui-input">
            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-block">
                <input type="checkbox" name="Status" lay-skin="switch" lay-text="ON|OFF" value="true" @(Model.MenuModel.Status ? "checked" : "")>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限分配</label>
        <div class="layui-input-block">
            <input type="checkbox" v-for="(it,index) in cbkList" :checked="cbkIsExist(it)?true:false" lay-skin="primary" :name="'cbk['+index+']'" :value="it.guid" :title="it.name" lay-filter="cbk">
        </div>
    </div>
    <div class="layui-form-item layui-cur-submit">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
        </div>
    </div>
    <input type="hidden" name="Guid" id="Guid" value="@Model.MenuModel.Guid" />
    <input type="hidden" name="ParentGuid" id="ParentGuid" value="@Model.MenuModel.ParentGuid" />
    <input type="hidden" name="Icon" id="Icon" value="@Model.MenuModel.Icon" />
    <input type="hidden" name="Layer" value="@Model.MenuModel.Layer" />
</form>
@section Scripts{
<script>
        var vm = new Vue({
            el: '#app',
            data: {
                cbkList: [],
                selectCbk:[]
            },
            created: function () {
                let cbkJson = '@Html.Raw(Model.MenuModel.BtnFunJson)';
                if (cbkJson != '') {
                    this.selectCbk = JSON.parse(cbkJson);;
                }
            },
            methods: {
                cbkIsExist: function (m) { //修改，判断值是否在已存在的字符串内
                    var that = this;
                    var cbkJson = '@Html.Raw(Model.MenuModel.BtnFunJson)';
                    if (cbkJson === '') { return false; }
                    if (cbkJson.indexOf(m.guid) > -1) {
                        return true;
                    }
                }
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).extend({
            iconPicker: 'iconPicker'
        }).use(['layer', 'jquery', 'common', 'iconPicker', 'form', 'tree'], function () {
            var form = layui.form, $ = layui.$, os = layui.common, iconPicker = layui.iconPicker,tree = layui.tree;
            iconPicker.render({
                elem: '#iconPicker',
                type: 'fontClass',
                search: true,
                page: false,
                click: function (data) {
                    //console.log(data);
                    $("#Icon").val(data.icon);
                }
            });
            var active = {
                loadBtnCode: function () {
                    os.ajax('api/code/getpages', { guid: 'a88fa4d3-3658-4449-8f4a-7f438964d716' }, function (res) {
                        vm.cbkList = res.data;
                        vm.$nextTick(function () {
                            form.render();
                        });
                    },'get');
                }
            }
            active.loadBtnCode();
            var index = parent.layer.getFrameIndex(window.name);
            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/menu/add";
                if ($("#Guid").val()) {
                    urls = "api/menu/edit";
                }
                data.field.cbks = vm.selectCbk;
                //os.log(data.field);
                os.ajax(urls, data.field, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode === 200) {
                        parent.layer.close(index);
                    } else {
                        os.error(res.message);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });

            os.ajax('api/menu/gettree/', {}, function (res) {
                            tree.render({
                                elem: '#tree'
                                , data: res
                                , onlyIconControl: true 
                                , click: function (obj) {
                                    guid=obj.data.id;
                                    $("#ParentGuid").val(obj.data.id);
                                    $("#ParentName").val(obj.data.title);
                                    $(".organize-tree").removeClass('active');
                                }
                            });
                        });
            $("#ParentName").click(function () {
                $(".organize-tree").addClass('active');
            });
            $(".organize-tree").mouseleave(function () {
                $(".organize-tree").removeClass('active');
            });
            form.on('checkbox(cbk)', function (data) {
                if (data.elem.checked) {
                    vm.selectCbk.push(data.value);
                } else {
                    var index = vm.selectCbk.findIndex(item =>{
        　　　　　　　　　　if(item==data.value){
        　　　　　　　　　　　　return true
        　　　　　　　　　　}
        　　　　　　　 })
                   vm.selectCbk.splice(index,1);
                }
            });

        });
</script>
}


